<template>
  <div>
    <HeadBar title="购物车"></HeadBar>
    <van-button
      v-cloak
      class="login-btn"
      round
      v-if="token && shopList.length == 0"
      type="danger"
      to="/classification"
      >去挑选</van-button
    >
    <van-button
      v-cloak
      class="login-btn"
      round
      v-if="!token"
      type="danger"
      to="/login"
      >请先登录</van-button
    >

    <!-- 底部 -->
    <van-submit-bar :price="3950"  @submit="onSubmit">
      <van-checkbox v-model="checked">全选(0)</van-checkbox>
      <template slot="text">
          <span>$0</span>
      </template>
          <van-button class="btn-text" slot="button" type="plain" size="normal">编辑</van-button>
          <van-button class="btn-text xiadan" slot="button" size="normal" type="danger">下单</van-button>

    </van-submit-bar>
  </div>
</template>

<script>
import { shopCarList } from "@/api/shopCar.js";
import HeadBar from "@/components/HeadBar.vue";
import store from "@/store";
export default {
  name: "shopCarIndex",
  data() {
    return {
      token: store.state.token,
      shopList: [],
      checked: true,
    };
  },
  created() {
    this.shopCarListHandler();
  },
  methods: {
    async shopCarListHandler() {
      const {
        data: {
          data: { cartList },
        },
      } = await shopCarList();
      this.shopList = cartList;
    },
    onSubmit() {
      console.log("提交订单");
    },
    onClickEditAddress() {
      console.log("修改地址");
    },
  },
  components: {
    HeadBar,
  },
};
</script>

<style scoped lang="scss">
::v-deep .login-btn {
  margin: 0 auto;
  display: block;
  box-shadow: 0 0 2px 2px #c00000;
  margin-top: 500px;
}
::v-deep .van-submit-bar {
  margin-bottom: 100px;
}
::v-deep .btn-text{
 
  text-align: center;
  border: unset;
}
// 225, 28, 52
.xiadan{
  background-color: rgb(225, 28, 52);
  color: #fff;
  
}
</style>
